<!-- 
	版本声明：
	* 由于 WanlLive、WanlChat、WanlPay 以下代码开发难度较大，已将相关代码独立申请著作权，受法律保护！！！
	* 无论你购买任何版本，均不允许复制到第三方直接、间接使用，且也不能以学习为目的参考和借鉴！！
	* 你仅有在 WanlShop 中使用、二次开发权利，否则我们会追究法律责任 
	* 深圳前海万联科技有限公司 @www.i36k.com
	* 法律顾问：易法通 @http://www.yifatong.com/
-->
<template>
	<view class="find-container">
		
		<text class="wlIcon-fanhui1 fanhui" @tap="goback"></text>
		
		<view class="main">
			<swiper 
			:current-item-id="currentId"
			:style="{height: wanlsys.windowHeight + 'px'}" 
			circular 
			acceleration
			@change="changeCurrent"
			@animationfinish="animationFinish">
				<!-- 滑动视频页 -->
				<swiper-item item-id="video">
					<wanl-movie-play
						ref="findPlay"
						:isComment="common.appConfig.comment_switch"
						:width="wanlsys.windowWidth" 
						:height="wanlsys.windowHeight"
						:bottom="wanlsys.windowBottom"
						:juid = "juid"
						:shortChildId = "shortChildId"
					/>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import wanlMoviePlay from '@/components/wanl-movie/play';
	import wanlMovieLists from '@/components/wanl-movie/lists';
	// #ifdef H5
	import jssdk from '@/common/libs/jssdk';
	// #endif
	export default {
		computed: {
			...mapState(['common'])
		},
		components: {
			wanlMoviePlay,
			wanlMovieLists
		},
		beforeCreate() {
			// #ifdef APP-NVUE
			var domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
				'fontFamily': "iconfont",
				'src': "url('/static/style/iconfont.ttf')"
			});
			// #endif
		},
		data() {
			return {
				wanlsys: {},
				currentId: '',
				currentList: [],
				isVideo: false,
				isLive: false,
				isShop: false,
				juid:0,
				shortChildId:0
			};
		},
		watch: {
			currentId(newVal, oldVal) {
				uni.setTabBarStyle({
					backgroundColor: newVal === 'find' ? '#ffffff' : '#161616',
					borderStyle: newVal === 'find' ? 'white' : 'black'
				})
				if(newVal === 'find'){
					if(this.isVideo){
						this.$refs.findPlay.handleVideoPause();
					}
				}
				if(newVal === 'video'){
					this.$nextTick(() => {
						if(this.isVideo){
							this.$refs.findPlay.handleVideoPlay();
						}
					})
				}
			}
		},
		onShow() {
			if(this.currentId === 'video'){
				uni.setTabBarStyle({
					backgroundColor: '#161616',
					borderStyle: 'black'
				})
			}
			setTimeout(()=> {
				uni.setNavigationBarColor({  
					frontColor: this.$store.state.common.appStyle.find_font_color == 'light' ? '#ffffff' : '#000000'
			    })  
			}, 200);
		},
		onLoad(option) {
			this.juid = option.id || 0;
			this.shortChildId = option.shortChildId || 0;
		},
		onHide() {
			setTimeout(() => {
				uni.setTabBarStyle({
					backgroundColor: '#ffffff',
					borderStyle: 'white'
				})
				if(this.isVideo){
					this.$refs.findPlay.handleVideoPause();
				}
			}, 50);
		},
		mounted() {
			const sys = uni.getSystemInfoSync();
			this.wanlsys = {
				headTop: sys.statusBarHeight,
				headHeight: sys.statusBarHeight + uni.upx2px(90),
				windowWidth: sys.windowWidth,
				windowHeight: sys.windowHeight,
				windowBottom: 0
			};
			// #ifdef APP-NVUE
			this.wanlsys.windowBottom = sys.windowBottom;
			// #endif
			
		},
		methods: {
			goback(){
				uni.navigateBack();
			},
			async loadData(id){
				await uni.request({
					url: '/wanlshop/short/shortChildList?id='+id,
					complete: res => {
						if(res.res.code === 1){
							this.currentList = res.data;
						}else{
							uni.showToast({
							    title: '服务器繁忙',
							    icon: 'none'
							});
						}
					}
				});
			},
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e)
				//#endif
			},
			changeCurrent(e) {
				this.currentId = e.detail.currentItemId;
			},
			onChangeTab(e) {
				this.currentId = e;
			}
		}
	}
</script>

<style>
	@import '@/static/style/wanlnvue.css';
	.fanhui{
		position: fixed;
		left: 40rpx;
		top: 110rpx;
		z-index: 99;
		color: white;
		font-size: 40rpx;
	}
</style>